<template>
  <div class="index-con">
    <div class="main-con">
      <div class="titimg">
        <h3 class="title">欢迎来到宠物管理系统</h3>
        <img src="../img/tit.jpg" />
      </div>
      <div class="inheader" @click="reo">退出登录</div>
    </div>
    <div class="show">
      <div class="asideshow">
        <div class="router-left">
          <router-link to="comm">商品管理</router-link>
          <router-link to="user">用户管理</router-link>
        </div>
      </div>
      <div class="routerright">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "in_dex",
  data() {
    return {};
  },
  // 注册组件
  components: {},
  methods: {
    reo() {
      this.$router.push({ name: "login" });
    },
  },
};
</script>
<style>
.show {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.router-left {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.router-right {
}
.index-con {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.aside {
  width: 64px !important;
  height: 100%;
  background-color: #334157;
  margin: 0px;
}
.asideshow {
  color: white;
  width: 240px !important;
  height: 100%;
  background-color: #334157;
}
.asideshow a {
  height: 20px;
  margin-top: 50px;
  text-decoration: none;
  color: white;
  cursor: pointer;
}
.main-con {
  position: relative;
  display: flex;
  background-color: #334157;
  justify-content: space-between;
  width: 100%;
}
.inheader {
  color: white;
  padding: 0px;
  height: 80px;
  border-left: 2px solid #333;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  background-color: #334157;
  padding-right: 20px;
  cursor: pointer;
}
.titimg {
  margin-top: 15px;
  margin-left: 100px;
}
img {
  border-radius: 25px;
  width: 50px;
  height: 50px;
}
.title {
  float: right;
  margin-top: 14px;
  margin-left: 10px;
  color: white;
}
</style>
